import {PageContainer} from '@ant-design/pro-layout';
import ProTable from "@ant-design/pro-table";
import {Button} from "antd";
import Deletes from "@/pages/Management/components/Deletes"
import Addmuoban from '@/pages/Management/Delivery/Freight/components/Addmuoban';
import {useState} from "react";

export default () => {
  const [DeletesIsShowEdit, setDeletesIsShowEdit] = useState(false);
  const [isShowAdd, setisShowAdd] = useState(false);
  const columns = [
    {
      title: 'ID',
      dataIndex: 'index',
      search: false,
      align: "center",
      width: 120,
    },
    {
      title: '模板名称',
      dataIndex: 'name',
      width: 300,
    },
    {
      title: '计费方式',
      dataIndex: 'Billing',
      search: false,
      align: "center",
      width: 300,
    },

    {
      title: '指定包邮',
      dataIndex: 'shipping',
      search: false,
      align: "center",
      width: 300,
    },

    {
      title: '排序',
      width: 300,
      dataIndex: 'Sort',
      align: "center",
      search: false,
    },
    {
      title: '添加时间',
      width: 300,
      dataIndex: 'time',
      align: "center",
      search: false,
    },
    {
      title: '操作',
      align: "center",
      width: 300,
      valueType: 'option',
      render: () =>
      [
        <a onClick={() => {setisShowAdd(true) }}>修改</a>,
        <a onClick={() => {setDeletesIsShowEdit(true) }}>删除</a>,
      ],
    },
  ];
  return (<div
    style={ {
      background: '#F5F7FA',
    } }
  >
    <PageContainer
      fixedHeader
      header={ {
        breadcrumb: {},
      } }
      onTabChange={(key) => {
        setTabKey(key)
      }}
    >
      <div>
        <div style={ {background: 'white', padding: '15px'} }>
          <Button type="primary" onClick={() => {
            setisShowAdd(true)
          }}>添加模板</Button>
        </div>

        <ProTable
          columns={columns}
          editable={ {
            type: 'multiple'
          } }
          rowKey="id"
          search={ {
            labelWidth: 'auto'
          } }
          pagination={ {
            pageSize: 5
          } }
          dateFormatter="string"
        />
        <Deletes isshow={DeletesIsShowEdit} setisshow={setDeletesIsShowEdit}/>
      </div>
      <Addmuoban isedit={isShowAdd} issetEdit={setisShowAdd}/>
    </PageContainer>
  </div>)
}
